<template>
  <div>
    <div class="box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="6" :push="1">
            <el-form-item label="标签名称">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :push="1">
            <el-form-item label="城市">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :push="1">
            <el-form-item label="地区">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" :push="1">
            <el-form-item label="状态">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :push="1">
            <el-form-item>
              <el-button size="small">清除</el-button>
              <el-button type="primary" size="small">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6" :push="3">
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              class="added"
              @click="added"
              >新增用户
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <!--  -->
      <div class="record">
        <i class="el-icon-info"></i>
        <span>共 {{ counts }} 条记录</span>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="企业编号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称" align="center">
        </el-table-column>
        <el-table-column prop="tags" label="标签" align="center">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者" align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" align="center">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              circle
              @click="handleEdit(scope.row)"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              type="success"
              plain
              circle
              @click="handleEdit(scope.row)"
              icon="el-icon-close"
            ></el-button>
            <el-button
              type="danger"
              plain
              circle
              @click="handleDelete(scope.row)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="butt">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="  prev, pager, next, sizes, jumper"
          :total="counts"
          style="margin-right: -200px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/companys.js'
export default {
  name: 'Companys',
  data () {
    return {
      currentPage: 0,
      formInline: {
        user: '',
        region: ''
      },
      form: {
        page: 1,
        pagesize: 10
      },
      counts: 1,
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      console.log(this.form)
      const { data } = await list(this.form)
      // console.log(data)
      this.counts = data.counts
      this.tableData = data.items
    },
    handleSizeChange (val) {
      // console.log(val)
      this.form.page = 1
      this.form.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getList()
    },
    // 添加
    added () {}
  }
}
</script>

<style scoped lang="less">
.butt {
  margin: 20px;
  text-align: right;
  margin-right: 220px;
  padding-bottom: 20px;
}
.box {
  width: 1300px;
  margin: 20px 20px;
  border-radius: 5px;
  background-color: #fff;
}
/deep/ .el-form {
  padding-top: 20px;
}
.record {
  width: 1260px;
  height: 40px;
  border-radius: 4px;
  line-height: 40px;
  margin: 20px auto;
  background-color: #f4f4f5;
  font-size: 14px;
  color: #ccc;
  span {
    margin-left: 10px;
  }
  .el-icon-info {
    font-size: 15px;
    color: #909399;
    margin-left: 15px;
  }
}
</style>
